<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css文件/学成案例2.css">
    <link rel="icon" href="img/学成在线.png" type="image/x-icon">
</head>

<body>
    <!-- 头部盒子 -->
    <div class="header">
        <div>

            <!-- 头部log图片 -->
            <div class="log">
                <img src="img/学成在线.png" alt="">
            </div>
            <!-- 超链接文字标题 -->
            <div class="wenzi1">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">课程</a></li>
                    <li><a href="#">职业规划</a></li>
                </ul>
            </div>
            <!-- 输入关键字搜索框 -->
            <div class="shuru">
                <input placeholder="输入关键字">
                <button></button>
            </div>
            <div class="urse">
            </div>
        </div>
    </div>
    <!-- 中部页面显示 -->
    <div class="bigbox1 w">
        <div class="box1">
            <!-- 左边侧边框 -->
            <div class="subnav">
                <ul>
                    <li><a href="#">前端开发 <span> &gt; </span></a></li>
                    <li><a href="#">后端开发 <span> &gt; </span> </a></li>
                    <li><a href="#">移动开发 <span> &gt; </span> </a></li>
                    <li><a href="#">人工智能 <span> &gt; </span> </a></li>
                    <li><a href="#">商业预测 <span> &gt; </span> </a></li>
                    <li><a href="#">云计算&大数据 <span> &gt; </span> </a></li>
                    <li><a href="#">运维&测试 <span> &gt; </span> </a></li>
                    <li><a href="#">UI设计 <span> &gt; </span> </a></li>
                    <li><a href="#">产品 <span> &gt; </span> </a></li>
                </ul>

            </div>
            <!-- 左边全部课程显示 -->
            <div class="box2 w">
                <h2>全部课程</h2>
                <div class="bd">
                    <ul>
                        <li>
                            <h4>继续学习 程序语言设计</h4>
                            <p>正在学习-使用对象</p>
                        </li>
                        <li>
                            <h4>继续学习 程序语言设计</h4>
                            <p>正在学习-使用对象</p>
                        </li>
                        <li>
                            <h4>继续学习 程序语言设计</h4>
                            <p>正在学习-使用对象</p>
                        </li>
                    </ul>

                    <a href="#" class="mod">全部课程</a>
                </div>
            </div>
        </div>

    </div>
    <!-- 精品推荐模块开始 -->
    <div class="box3 w">
        <h3>精品推荐</h3>
        <ul>
            <li><a href="#">JQuery</a></li>
            <li><a href="#">Spark</a></li>
            <li><a href="#">MySql</a></li>
            <li><a href="#">JavaWeb</a></li>
            <li><a href="#">MySql</a></li>
            <li><a href="#">JavaWeb</a></li>
        </ul>
        <a href="#" class="mod">修改兴趣</a>
    </div>
    <!-- 精品推荐模块结束 -->
    <!-- box4核心内容区域开始 -->
    <div class="box4 w">
        <div class="box4-1">
            <h3>精品推荐</h3>
            <a href="#">查看全部</a>
        </div>
        <div class="box4-2">
            <ul>
                <li>
                    <em>
                        <img src=".//img/形状24.png" alt="">
                    </em>
                    <img src="img/图层133.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
            </ul>
            <ul>
                <li>
                    <img src="img/图层135.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                    <em>
                        <img src=".//img/形状24.png" alt="">
                    </em>
            </ul>
            <ul>
                <li>
                    <em>
                        <img src=".//img/形状24.png" alt="">
                    </em>
                    <img src="img/图层136.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
            </ul>
            <ul>
                <li>
                    <em>
                        <img src=".//img/形状24.png" alt="">
                    </em>
                    <img src="img/图层137.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
            </ul>
            <ul>
                <li>
                    <em>
                        <img src=".//img/形状24.png" alt="">
                    </em>
                    <img src="img/图层137.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
            </ul>
            <ul>
                <li>
                    <em>
                        <img src=".//img/形状24.png" alt="">
                    </em>
                    <img src="img/图层133.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
            </ul>
            <ul>
                <li>
                    <em>
                        <img src=".//img/形状24.png" alt="">
                    </em>
                    <img src="img/图层135.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
            </ul>
            <ul>
                <li>
                    <em>
                        <img src=".//img/形状24.png" alt="">
                    </em>
                    <img src="img/图层136.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
            </ul>
            <ul>
                <li>
                    <em>
                        <img src=".//img/形状24.png" alt="">
                    </em>
                    <img src="img/图层137.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
            </ul>
            <ul>
                <li>
                    <em>
                        <img src=".//img/形状24.png" alt="">
                    </em>
                    <img src="img/图层137.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
            </ul>
        </div>
    </div>
    <!-- box4核心内容区域结束 -->
    <!-- 底部内容开始 -->
    <div class="bottom">
        <div class="left1">
            <img src="./img/学成在线.png" alt="" class="img">
            <p class="gekai">学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。
                <br> © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号
            </p>
        </div>
    </div>
    <!-- 底部内容结束 -->
    <script>
    </script>
</body>

</html>